<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>查看我的资料</title>
    <div th:replace="common/link::header"></div>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">查看我的资料</div>
                <div class="layui-card-body" pad15>
                    <div class="layui-form" lay-filter="sys-user-form" id="sys-user-form">
                        <input type="hidden" name="id" id="id">
                        <!--用户的昵称-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="nickName" lay-verify="required" class="layui-input" readonly
                                       disabled>
                            </div>
                        </div>
                        <!--用户名-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="userName" readonly class="layui-input">
                            </div>
                        </div>
                        <!--用户的性别-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-inline">
                                <input type="text" name="sex" id="sexInput" class="layui-input" readonly>
                            </div>
                        </div>
                        <!--用户头像-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">头像</label>
                            <div class="layui-input-inline layui-upload">
                                <input type="hidden" id="avatar" name="avatar">
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" onclick="fun.preview(this)" id="upload-img"
                                         width="100px" height="100px">
                                    <p id="upload-img-text"></p>
                                </div>
                            </div>
                        </div>
                        <!--用户的手机号码-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机</label>
                            <div class="layui-input-inline">
                                <input type="text" name="phonenumber" lay-verify="phone" autocomplete="off"
                                       class="layui-input" readonly>
                            </div>
                        </div>
                        <!--用户的邮箱-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" name="email" lay-verify="email" autocomplete="off"
                                       class="layui-input" readonly>
                            </div>
                        </div>
                        <!--用户的备注-->
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">用户简介</label>
                            <div class="layui-input-block">
                                <textarea name="remark" placeholder="请输入内容" class="layui-textarea" readonly></textarea>
                            </div>
                        </div>
<!--                        <div class="layui-form-item">-->
<!--                            <div class="layui-input-block">-->
<!--                                <button class="layui-btn" lay-submit lay-filter="save-submit" id="save-submit">确认</button>-->
<!--                                <button class="layui-btn" lay-filter="back-index" id="back-index">确认</button>-->
<!--                                <button class="layui-btn  layui-btn-normal" lay-filter="edit-user-info" id="edit-user-info">修改个人信息</button>-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/script::footer"></div>
<script th:inline="javascript">
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
      index: 'lib/index' //主入口模块
    }).use(['index', 'set', 'upload','form','crud'],function () {
        let $ = layui.$,
                upload = layui.upload,
                crud = layui.crud,
                form = layui.form;

        let sysUser = [[${sysUser}]];

        // 设置图片链接
        $('#upload-img').attr('src', sysUser.avatar); //图片链接（base64）

        form.val('sys-user-form', sysUser);


        sexData = "";
        // alert(sysUser.sex);
        // 设置性别的值
        if (sysUser.sex == "0"){
          sexData = "未知";
        } else if(sysUser.sex == "1"){
          sexData = "男";
        } else if(sysUser.sex == "2"){
          sexData = "女";
        }
        $("#sexInput").val(sexData);

        // 修改用户信息
        form.on('submit(save-submit)', function(data) {
            $.ajax({
                type: 'POST',
                url:  ctx + '/sysUser/editUserInfo',
                data: JSON.stringify(data.field),
                contentType:'application/json;charset=UTF-8',
                dataType: 'json',
                success: function(result) {
                    layer.msg(result.message);
                }
            });
        });

        //普通图片上传
        crud.uploadImg("avatar");
    });
</script>
</body>
</html>